<template>
    <view class="">
 			<view class="bar_top"> 
				
				<view class="search_bar">
                    <picker mode="selector" :range="yearList" :value="yearIndex" @change="choiseYear">
                        <view class="search_bar_picker">
                            <view>{{yearList[yearIndex]}}</view>
                            <image src="/static/images/bar_down.png"></image>
                        </view>
                    </picker>

                    <picker mode="selector" :range="statusList" range-key="name" :value="statusIndex" @change="choiseStatus">
                        <view class="search_bar_picker" style="margin-left:20rpx;">
                            <view>{{statusList[statusIndex].name}}</view>
                            <image src="/static/images/bar_down.png"></image>
                        </view>
                    </picker>

					<view class="search_bar_btn">
						<image :src="type == 1 ? '/static/images/unpie.png' : '/static/images/pie.png'" @tap="selChartType(0)"></image>
						<image :src="type == 0 ? '/static/images/unbar.png' : '/static/images/bar.png'" @tap="selChartType(1)"></image>
					</view>
				</view>
				
				<view class="statistics_box">
					<canvas canvas-id="chart" id="chart" class="charts" @touchstart="touchChart"></canvas>
				</view>
			</view>
  	</view>   

</template>
<script>
	import uCharts from "../../../js_sdk/u-charts/u-charts/u-charts.js";
	let chart = null;
    export default {
        data(){
			return{
  				barNum:0,
                type:0,
                yearList:[2001,2002,2003,2004,2005,2006,2007,2008,2009,
                2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,
                2020,2021,2022,2023,2024,2025],
                yearIndex:19,
                statusList:[{name:"未拜访",data:0},{name:"已拜访",data:1}],
                statusIndex:0,
				branch_id:0,   // 部门ID
				cWidth:"",
				cHeight:"",
				series1: [],
				categories: [],
				series2:[
					{"name":"","data": []}
				],
				colorList:["#8cc540","#009f5d","#019fa0","#019fde","#007cdc","#887ddd","#cd7bdd","#ff5675","#ff1244","#ff8345","#f8bd0b","#d1d2d4"]
			}
		},
		onLoad() {
			this.cWidth=uni.upx2px(670);
			this.cHeight=uni.upx2px(500);
			this.getChatData();
		},
		methods:{
			selChartType(type){
				if(type != this.type){
					this.type = type;
					this.drawChart();
				}
			},
			// 获取数据
			getChatData(){
 
				this.boxHide = false;
				let upJson = {year:this.yearList[this.yearIndex],user_id:uni.getStorageSync("userId"),status:this.statusList[this.statusIndex].data};

				this.$api.getChatList(upJson,2).then(res =>{
					
 					this.series1 = new Array();
					this.categories = new Array();
					this.series2[0].data = new Array();

					// 封装图标数据
					for(let i in res){

						res[i].color = this.colorList[i];
						
						this.series1.push(res[i]);
						this.categories.push(this.series1[i].name);
						this.series2[0].data.push({'value':res[i].data,'color':res[i].color});
					}

					this.drawChart();

				})

 			},
			choiseYear(e){
               // console.log("--->>>>>",e.detail.value);

                this.yearIndex = e.detail.value;

                this.getChatData();
            },
            choiseStatus(e){
                this.statusIndex = e.detail.value;

                this.getChatData();
            },
			drawChart(){
				let that = this;
				if(this.type == 0){
					chart = new uCharts({
						$this:this,
						canvasId: 'chart',
						type: 'pie',
						fontSize:11,
						legend:{show:true},
						background:'#FFFFFF',
						pixelRatio:1,
						series: this.series1,
						animation: true,
						width: this.cWidth,
						height: this.cHeight,
						dataLabel: true,
						extra: {
							pie: {
							  labelWidth:15
							}
						},
					});
				}else{
					chart = new uCharts({
						$this:this,
						canvasId: 'chart',
						type: 'column',
						legend:{show:false},
						fontSize:11,
						background:'#FFFFFF',
						pixelRatio:1,
						padding:[40,15,4,15],
						animation: true,
						categories: this.categories,
						series: this.series2,
						xAxis: {
							disableGrid:true,
						},
						yAxis: {
							//disabled:true
						},
						dataLabel: true,
						width: this.cWidth,
						height: this.cHeight,
						extra: {
							column: {
								type:'group',
								width: 20
							}
						  }
					});
				}
			},
			touchChart(e){
				chart.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			}, 
		}       
    }
</script>
<style>

</style>